Fetch API হল একটি আধুনিক JavaScript API যা ব্যবহারকারীদের ওয়েব পেজ থেকে অ্যাসিনক্রোনাসভাবে ডেটা ফেচ (আনলিমিটেড রিসোর্স বা সার্ভার থেকে ডেটা আনতে) করার সুবিধা দেয়। এটি Promise-based এবং সাদামাটা সিনট্যাক্সের মাধ্যমে HTTP অনুরোধ পাঠানো এবং সাড়া পাওয়া যায়।
এখানে আমরা Fetch API দিয়ে ডেটা ফেচ করার একটি উদাহরণ দেখব।
Fetch API দিয়ে ডেটা ফেচ করা:
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// Fetch API দিয়ে ডেটা ফেচ করা
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
setData(data); // ডেটা স্টেটে সেট করা
setIsLoading(false); // লোডিং শেষ
})
.catch(error => {
setError(error.message); // যদি কোনো ত্রুটি ঘটে
setIsLoading(false); // লোডিং শেষ
});
}, []); // কম্পোনেন্ট প্রথমবার মাউন্ট হলে একবারই রান হবে
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
<h1>Fetched Data</h1>
<ul>
{data.map(post => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.body}</p>
</li>
))}
</ul>
</div>
);
}
export default DataFetcher;ব্যাখ্যা:
useStateহুক:data: ফেচ করা ডেটা সংরক্ষণ করতে ব্যবহৃত স্টেট।isLoading: লোডিং স্টেট যা ফেচিং প্রক্রিয়া চলাকালীন লোডিং অবস্থায় থাকে।error: যদি কোনো ত্রুটি ঘটে তবে সেটি সংরক্ষণ করা হবে।
useEffectহুক:fetchAPI কল করার জন্য ব্যবহার করা হয়। এখানে'https://jsonplaceholder.typicode.com/posts'URL থেকে ডেটা ফেচ করা হচ্ছে। এটি একটি পাবলিক API যার মাধ্যমে ফেক পোস্ট ডেটা পাওয়া যায়।then()এর মাধ্যমে প্রাপ্ত রেসপন্সের JSON ডেটা ব্যবহার করে সেটিsetDataদিয়ে স্টেটে রাখা হচ্ছে।catch()ব্লকে যদি কোনো ত্রুটি ঘটে, তাsetErrorএর মাধ্যমে স্টেটে স্টোর করা হয়।
- ল্যান্ডিং স্টেট:
- লোডিং (Loading): যখন ডেটা ফেচ হচ্ছে তখন লোডিং টেক্সট দেখানো হবে।
- ত্রুটি (Error): যদি কোনো সমস্যা ঘটে, তাতে ত্রুটির বার্তা দেখানো হবে।
- ডেটা: সফলভাবে ডেটা ফেচ হলে, তা ইউজার ইন্টারফেসে দেখানো হবে।
Fetch API এর ব্যবহার সম্পর্কে কিছু গুরুত্বপূর্ণ বিষয়:
- অ্যাসিনক্রোনাস (Asynchronous) কাজ করা:
fetch()একটি Promise রিটার্ন করে, যার মাধ্যমে আপনি.then()এবং.catch()মেথড ব্যবহার করে অ্যাসিনক্রোনাস ডেটা রিসিভ করতে পারেন। - প্রতিক্রিয়া যাচাই:
response.okব্যবহার করে আপনি রেসপন্সের স্ট্যাটাস কোড পরীক্ষা করতে পারেন। যদি রেসপন্স ভালো না হয় (যেমন 404 বা 500 স্ট্যাটাস), তাহলে আপনি একটি ত্রুটি (error) ছুড়ে দিতে পারেন। - JSON পদ্ধতিতে রূপান্তর:
response.json()ব্যবহার করে ফেচ করা ডেটা JSON ফর্ম্যাটে রূপান্তরিত হয়।
সারাংশ:
Fetch API দিয়ে ডেটা ফেচিং একটি সহজ পদ্ধতি যা React বা সাধারণ JavaScript অ্যাপ্লিকেশনগুলিতে ডেটা অনুরোধ পাঠাতে এবং তা রিসিভ করতে ব্যবহৃত হয়। এটি অ্যাসিনক্রোনাস এবং Promise ভিত্তিক, যা ডেটা ফেচিংয়ের জন্য অত্যন্ত কার্যকরী।
Content added By
Read more
